<template>
  <div
    class="search-list"
    v-title
    :data-title="$t('router.searchClassicalTitle')"
  >
    <v-nav></v-nav>
    <h2 class="title">{{ $t("search.advancedSearch") }}</h2>
    <el-form
      :model="form"
      :rules="rules"
      class="demo-form-inline"
      ref="ruleForm"
    >
      <!-- 作曲家 -->
      <el-form-item :label="$t('public.composer')" prop="composer">
        <el-input
          v-model="form.composer"
          @focus="openDialog('composer')"
          :placeholder="$t('search.pleaseEnterComposer')"
        >
          <el-button
            @click="openDialog('composer')"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-form-item>

      <!-- 名称 -->

      <el-form-item :label="$t('search.name')" prop="name">
        <el-input
          v-model="form.name"
          :placeholder="$t('search.EnterName')"
        ></el-input>
      </el-form-item>

      <!-- 改编者 -->
      <!--
          <el-form-item :label="$t('search.adapter')" prop="arrangers">
            <el-input
              disabled
              v-model="form.arrangers"
              :placeholder="$t('search.enterAdapter')"
            >
              <el-button
                disabled
                @click="openDialog('arrangers')"
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </el-form-item>-->

      <!-- 分类 -->
      <el-form-item :label="$t('public.classify')" prop="categories">
        <el-input
          v-model="form.categories"
          @focus="openDialog('categories')"
          :placeholder="$t('search.pleaseEnterClassify')"
        >
          <el-button
            @click="openDialog('categories')"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-form-item>

      <el-form-item :label="$t('search.musicalInstruments')" prop="instruments">
        <el-input
          v-model="form.instruments"
          @focus="openDialog('instruments')"
          :placeholder="$t('search.enterMusicalInstruments')"
        >
          <el-button
            @click="openDialog('instruments')"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-form-item>

      <!--  -->
      <!-- 作词家 -->
      <!--
          <el-form-item :label="$t('search.lyricist')" prop="lyricists">
            <el-input
              disabled
              v-model="form.lyricists"
              :placeholder="$t('search.enterLyricist')"
            >
              <el-button
                disabled
                @click="openDialog('lyricists')"
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </el-form-item>
         -->
      <!-- 乐器 -->
      <!--
          <el-form-item
            :label="$t('search.musicalInstruments')"
            prop="instruments"
          >
            <el-input
              v-model="form.instruments"
              :placeholder="$t('search.enterMusicalInstruments')"
            >
              <el-button
                @click="openDialog('instruments')"
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </el-form-item>
         -->
      <!--  -->

      <!-- 艺术家 -->
      <el-form-item :label="$t('public.artist')" prop="artists">
        <el-input
          v-model="form.artists"
          @focus="openDialog('artists')"
          :placeholder="$t('search.pleaseEnterArtist')"
        >
          <el-button
            @click="openDialog('artists')"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-form-item>

      <!-- 时期 -->
      <el-form-item :label="$t('search.period')" prop="periods">
        <el-select
          v-model="form.periods"
          class="periodSelect"
          clearable
          filterable
          :placeholder="$t('search.entPeriod')"
        >
          <el-option
            v-for="item in periodsList"
            :key="item.periodId"
            :label="
              $i18n.locale === 'zh'
                ? item.periodCname || item.periodName
                : item.periodName
            "
            :value="item.periodName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 乐队(合唱团、合奏团、管弦乐队) -->
      <!--
          <el-form-item :label="$t('search.bands')" prop="band">
            <el-input
              disabled
              v-model="form.band"
              :placeholder="$t('search.enterBand')"
            >
              <el-button
                disabled
                @click="openDialog('band')"
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </el-form-item>
         -->

      <!-- 国家/地区 -->
      <el-form-item :label="$t('search.countryRegion')" prop="countries">
        <el-input
          v-model="form.countries"
          @focus="openDialog('countries')"
          :placeholder="$t('search.PleaseEnterCountryRegion')"
        >
          <el-button
            @click="openDialog('countries')"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-form-item>

      <el-form-item :label="$t('public.brand')" prop="catName">
        <el-input
          v-model="form.catName"
          @focus="openDialog('catName')"
          :placeholder="$t('search.pleaseEnterBrand')"
        >
          <el-button
            @click="openDialog('catName')"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-form-item>
      <!-- 厂牌 -->
      <!--
          <el-form-item :label="$t('public.brand')" prop="catName">
            <el-input
              v-model="form.catName"
              :placeholder="$t('search.pleaseEnterBrand')"
            >
              <el-button
                @click="openDialog('catName')"
                slot="append"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </el-form-item>
         -->
      <!-- 创作年代 -->
      <!--
          <span>{{ $t("main.creationAge") }}</span>
          <el-date-picker
            disabled
            v-model="creationDate"
            class="creationDate"
            type="daterange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            :range-separator="$t('search.to')"
            :start-placeholder="$t('search.startDate')"
            :end-placeholder="$t('search.endDate')"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
         -->

      <!-- 时长from 0 to 150 minutes -->
      <!-- 发行日期 -->
      <!--

          <span>{{ $t("main.duration") }} from 0 to 150 minutes</span>
          <el-slider
            disabled
            v-model="burningTime"
            class="burningTime"
            :max="150"
          ></el-slider>


          <span>{{ $t("search.issueDate") }}</span>
          {{ releaseDate }}
          <el-date-picker
            disabled
            v-model="releaseDate"
            type="month"
            class="releaseDate"
            value-format="timestamp"
            :placeholder="$t('search.selectYearMonth')"
          ></el-date-picker>-->
      <el-row class="footBtn">
        <el-button type="primary" @click="searchAllBtn('ruleForm')">{{
          $t("public.search")
        }}</el-button>
        <el-button class="clearBtn" @click="clearBtn('ruleForm')">{{
          $t("search.empty")
        }}</el-button>
      </el-row>
    </el-form>

    <!--弹窗界面-->
    <el-dialog
      width="68%"
      class="scrollbar"
      :title="$t(textMap[dialogStatus])"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <!-- 作曲家 -->
      <div class="dialogComposer box" v-if="dialogStatus === 'composer'">
        <v-filter @chooseType="chooseType" :diff="filter"></v-filter>
        <div class="page-wrap">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-size="params.pageSize"
            background
            hide-on-single-page
            layout="total, prev, pager, next, jumper"
            :total="total"
            :small="isMobile"
          >
          </el-pagination>
        </div>
        <ul class="list" v-loading="fullscreenLoading">
          <li
            v-for="item of list"
            :key="item.personId"
            @click="selected('composer', item)"
            v-text="
              $i18n.locale === 'zh'
                ? item.fullCname || item.fullName
                : item.fullName
            "
          ></li>
        </ul>
      </div>
      <!-- 改编者 -->
      <div class="dialogArrangers box" v-else-if="dialogStatus === 'arrangers'">
        <v-filter @chooseType="chooseType" :diff="filter"></v-filter>
        <ul class="list" v-loading="fullscreenLoading">
          <li
            v-for="item of list"
            :key="item.personId"
            @click="selected('arrangers', item)"
            v-text="
              $i18n.locale === 'zh'
                ? item.fullCname || item.fullName
                : item.fullName
            "
          ></li>
        </ul>
      </div>
      <!-- 分类 -->
      <div
        class="dialogCategories box"
        v-else-if="dialogStatus === 'categories'"
      >
        <!-- <v-filter @chooseType="chooseType" :diff="filter"></v-filter> -->
        <div class="page-wrap">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-size="params.pageSize"
            background
            hide-on-single-page
            layout="total, prev, pager, next, jumper"
            :total="total"
            :small="isMobile"
          >
          </el-pagination>
        </div>
        <ul class="list" v-loading="fullscreenLoading">
          <li
            v-for="item of list"
            :key="item.personId"
            @click="selected('categories', item)"
            v-text="
              $i18n.locale === 'zh'
                ? item.categoryCname || item.categoryName
                : item.categoryName
            "
          ></li>
        </ul>
      </div>
      <!-- 作词家 -->
      <div class="dialogLyricists box" v-else-if="dialogStatus === 'lyricists'">
        <v-filter @chooseType="chooseType" :diff="filter"></v-filter>
        <ul class="list" v-loading="fullscreenLoading">
          <li
            v-for="item of list"
            :key="item.personId"
            @click="selected('lyricists', item)"
            v-text="
              $i18n.locale === 'zh'
                ? item.fullCname || item.fullName
                : item.fullName
            "
          ></li>
        </ul>
      </div>
      <!-- 乐器 -->
      <div
        class="dialogInstruments box"
        v-else-if="dialogStatus === 'instruments'"
      >
        <!-- <v-filter @chooseType="chooseType" :diff="filter"></v-filter> -->
        <div class="page-wrap">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-size="params.pageSize"
            background
            hide-on-single-page
            layout="total, prev, pager, next, jumper"
            :total="total"
            :small="isMobile"
          >
          </el-pagination>
        </div>
        <ul class="list" v-loading="fullscreenLoading">
          <li
            v-for="item of list"
            :key="item.personId"
            @click="selected('instruments', item)"
            v-text="
              $i18n.locale === 'zh'
                ? item.instrumentCname || item.instrumentName
                : item.instrumentName
            "
          ></li>
        </ul>
      </div>
      <!-- 艺术家 -->
      <div class="dialogArtists box" v-else-if="dialogStatus === 'artists'">
        <v-filter @chooseType="chooseType" :diff="filter"></v-filter>
        <div class="page-wrap">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-size="params.pageSize"
            background
            hide-on-single-page
            layout="total, prev, pager, next, jumper"
            :total="total"
            :small="isMobile"
          >
          </el-pagination>
        </div>
        <ul class="list" v-loading="fullscreenLoading">
          <li
            v-for="item of list"
            :key="item.personId"
            @click="selected('artists', item)"
            v-text="
              $i18n.locale === 'zh'
                ? item.fullCname || item.fullName
                : item.fullName
            "
          ></li>
        </ul>
      </div>
      <!-- 乐队 -->
      <div class="dialogBand box" v-else-if="dialogStatus === 'band'">
        <v-filter @chooseType="chooseType" :diff="filter"></v-filter>
        <ul class="list" v-loading="fullscreenLoading">
          <li
            v-for="item of list"
            :key="item.personId"
            @click="selected('band', item)"
            v-text="
              $i18n.locale === 'zh'
                ? item.fullCname || item.fullName
                : item.fullName
            "
          ></li>
        </ul>
      </div>
      <!-- 国家/地区 -->
      <div class="dialogCountries box" v-else-if="dialogStatus === 'countries'">
        <v-filter @chooseType="chooseType" :diff="filter"></v-filter>
        <ul class="list" v-loading="fullscreenLoading">
          <li
            v-for="item of list"
            :key="item.personId"
            @click="selected('countries', item)"
            v-text="
              $i18n.locale === 'zh'
                ? item.displayCname || item.displayName
                : item.displayName
            "
          ></li>
        </ul>
      </div>
      <!-- 厂牌 -->
      <div class="dialogCatName box" v-else-if="dialogStatus === 'catName'">
        <v-filter @chooseType="chooseType" :diff="filter"></v-filter>
        <ul class="list" v-loading="fullscreenLoading">
          <li
            v-for="item of list"
            :key="item.catlabelId"
            @click="selected('catName', item)"
            v-text="item.displayName"
          ></li>
        </ul>
      </div>
      <nice-empty
        v-show="list.length == 0 && fullscreenLoading == false"
        :emptyText="$t('public.noData')"
      ></nice-empty>
    </el-dialog>
  </div>
</template>

<script>
import vNav from "@/components/common/header/Nav";
import { mapGetters, mapMutations } from "vuex";
import vFilter from "@/components/common/filter/Index";
export default {
  data() {
    return {
      filter: ["en"],
      form: {
        composer: "", //作曲家
        name: "", //名称
        arrangers: "", //改编者
        categories: "", //分类
        lyricists: "", //作词家
        instruments: "", //乐器
        artists: "", //艺术家
        periods: "", //时期
        band: "", //乐队
        countries: "", //国家/地区
        catName: "", //厂牌
      },
      periodsList: [], // 时期下拉列表
      rules: {
        // name: [
        //   { required: true, message: this.$t('search.EnterName'), trigger: 'blur' },
        // ]
      },
      creationDate: "", //创作日期
      burningTime: 150,
      releaseDate: "", //发行日期

      // 请求参数
      params: {
        // 返回数量
        pageSize: 50,
        // 当前页数
        pageNum: 1,
      },
      firstName: "A",
      //数据载入动画
      fullscreenLoading: true,
      list: [],

      // el-dialog相关
      textMap: {
        //添加与编辑界面
        composer: "public.composer", //'public.edit'
        arrangers: "search.adapter",
        categories: "public.classify",
        lyricists: "search.lyricist",
        instruments: "search.musicalInstruments",
        artists: "public.artist",
        band: "search.band",
        countries: "search.countryRegion",
        catName: "search.brand",
      },
      dialogFormVisible: false, //弹窗
      dialogStatus: "", //编辑框界面切换
      total: 0, //总条数
    };
  },
  components: {
    vNav,
    vFilter,
  },
  computed: {
    ...mapGetters(["isMobile"]),
    pickerOptions() {
      return {
        shortcuts: [
          {
            text: this.$t("search.lastWeek"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("search.lastMonth"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("search.lastThreeMonths"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      };
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getPeriods();
  },
  methods: {
    ...mapMutations({
      setSearchForm: "SET_SEARCHFORM",
    }),
    // 选择单个弹框
    openDialog(type) {
      // this.firstName = "A";
      this.params.pageNum = 1;
      this.dialogStatus = type;
      this.dialogFormVisible = true;
      this.getList(type);
    },
    //分页 每页条数
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getList(this.dialogStatus);
    },
    //当前页
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.list = [];
      this.getList(this.dialogStatus);
    },
    //筛选标签
    chooseType(type) {
      // if ("en" in type) {
      this.firstName = type.en;
      // }
      this.params.pageNum = 1;
      this.list = [];
      this.getList(this.dialogStatus);
    },
    // 获取dialog列表数据
    async getList(type) {
      this.fullscreenLoading = true;
      try {
        let res, params;
        if (type === "composer") {
          //作曲家
          params = {
            fullNameAlpha: this.firstName,
            personType: 1, //1.作曲家,2.艺术家
          };
          res = await this.$api.classical.getPersonListPage({
            ...params,
            ...this.params,
          });
        } else if (type === "arrangers") {
          // 改编者
        } else if (type === "categories") {
          // 分类
          res = await this.$api.classical.getCategoryPage(this.params);
        } else if (type === "lyricists") {
          // 作词家
        } else if (type === "instruments") {
          // 乐器
          res = await this.$api.classical.getInstrument(this.params);
        } else if (type === "artists") {
          // 艺术家
          params = {
            fullNameAlpha: this.firstName,
            personType: 2, //1.作曲家,2.艺术家
          };
          res = await this.$api.classical.getPersonListPage({
            ...params,
            ...this.params,
          });
        } else if (type === "band") {
          // 乐队
        } else if (type === "countries") {
          // 国家/地区
          params = {
            alpha: this.firstName,
          };
          res = await this.$api.national.getCountryList(params);
        } else if (type === "catName") {
          // 厂牌
          params = {
            alpha: this.firstName,
          };
          res = await this.$api.classical.getLabelList(params);
        }
        if (res.code === 1000000) {
          this.list = res.source ? res.source : [];
          this.fullscreenLoading = false;
          this.total = res.total ? res.total : 0;
        } else {
          this.$message({
            showClose: true,
            message: this.$t("public.listGetFaild"),
            type: "error",
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 选中数据
    selected(type, item) {
      if (type === "composer") {
        //作曲家
        this.form.composer =
          this.$i18n.locale === "zh"
            ? item.fullCname || item.fullName
            : item.fullName;
        this.dialogFormVisible = false;
      } else if (type === "arrangers") {
        // 改编者
        // this.form.arrangers =
      } else if (type === "categories") {
        // 分类
        this.form.categories = item.categoryName;
        this.dialogFormVisible = false;
      } else if (type === "lyricists") {
        // 作词家
        // this.form.lyricists =
        this.dialogFormVisible = false;
      } else if (type === "instruments") {
        // 乐器
        this.form.instruments = item.instrumentName;
        this.dialogFormVisible = false;
      } else if (type === "artists") {
        // 艺术家
        this.form.artists = item.fullName;
        this.dialogFormVisible = false;
      } else if (type === "band") {
        // 乐队
        // this.form.categories =
        this.dialogFormVisible = false;
      } else if (type === "countries") {
        // 国家/地区
        this.form.countries = item.displayName;
        // this.$i18n.locale === "zh"
        //   ? item.displayCname || item.displayName
        //   :
        this.dialogFormVisible = false;
      } else if (type === "catName") {
        // 厂牌
        this.form.catName = item.displayName;
        this.dialogFormVisible = false;
      }
    },
    // 底部统一搜索
    searchAllBtn() {
      if (JSON.stringify(this.utils.filterParams(this.form)) == "{}") {
        this.$message({
          showClose: true,
          message: this.$t("search.keywordEmpty"),
          type: "warning",
        });
        return false;
      }
      this.setSearchForm(this.utils.filterParams(this.form));
      let toName = this.$route.name;
      this.$router.push({
        name:
          toName == "classicalSearch"
            ? "classicalSearchResult"
            : toName == "nationalSearch"
            ? "nationalSearchResult"
            : "jazzSearchResult",
        params: { sort: "AS" },
      });
    },
    // 重置
    clearBtn(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取时期下拉数据
    async getPeriods() {
      let res = await this.$api.user.getPeriods({});
      if (res.code === 1000000) {
        this.periodsList = res.source ? res.source : [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search-list {
  .title {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .demo-form-inline {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .el-form-item {
      flex: 0 0 50%;
      max-width: 48%;
      margin-bottom: 5px;
      .periodSelect {
        width: 100%;
      }
      .creationDate,
      .releaseDate {
        width: 100%;
        margin-top: 12px;
      }
      .burningTime {
        margin-top: 12px;
      }
    }
    .footBtn {
      width: 100%;
      margin-top: 40px;
      display: flex;
      justify-content: space-around;
      .el-button {
        width: 400px;
      }
    }
  }
  .el-dialog {
    .box {
      .list {
        display: flex;
        flex-wrap: wrap;
        min-height: 100px;
        max-height: 500px;
        overflow: auto;
        > li {
          flex: 0 0 23%;
          margin: 16px 0;
          padding: 0 1%;
          cursor: pointer;
          font-size: 18px;
          color: #333333;
          font-family: Helvetica;
          &:hover {
            color: #a1322c;
          }
        }
      }
    }
  }
}
</style>
